<template>
    <div class="progress_box">
        <el-button size="mini" type="success" @click="handlerStart">开启progress ----{{ num }}</el-button>
        <UploadProgress :precent="newNum"></UploadProgress>
    </div>
</template>

<script>
import UploadProgress from '../components/uploadProgress.vue'
export default {
    data() {
        return {
            num: 0,
            newNum:0,
            timer:null
        }
    },
    components: { UploadProgress },
    watch: {},
    activated() { },
    created() { },
    methods: {
        handlerStart() {
            this.timer = setInterval(() => {
                this.getNum();
            }, 1000);
        },
        getNum(){
            this.num = this.num + 10;
            this.newNum = this.num + "%"
            console.log("-------",this.num);
            console.log("-------",this.newNum);
            if (this.num >=100) {
                clearInterval(this.timer);
            }
        }
    },
    mounted() { }
}
</script>

<style lang='scss'>
.progress_box {
    padding: 20px;
    width: 100%;
    display: grid;
    place-items: center;
}
</style>